﻿<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>主页</title>
 <link rel="stylesheet" href="static/assets/plugsin/css/font-awesome-4.7.0/css/font-awesome.css">
    <!-- begin::global styles -->
    <link rel="stylesheet" href="static/assets/vendors/bundle.css" type="text/css">
    <!-- end::global styles -->

    <!-- begin::custom styles -->
    <link rel="stylesheet" href="static/assets/css/app.css" type="text/css">
    <link rel="stylesheet" href="static/assets/css/custom.css" type="text/css">
    <!-- end::custom styles -->

</head>
<body>

<!-- begin::page loader-->
<div class="page-loader">
    <div class="spinner-border"></div>
    <span>Loading ...</span>
</div>
<!-- end::page loader -->



<!-- begin::side menu -->
<div class="side-menu">
    <div class='side-menu-body'>
        <ul>
            <li class="side-menu-divider">Navigation</li>
            <li style="margin-bottom: 20px">
                <a href="/upload_train"><i class="icon ti-files"></i><span style="font-size: large">训练</span> </a>
            </li>
            <li style="margin-bottom: 20px"><a href="/upload_test"><i class="icon ti-file"></i> <span style="font-size: large">测试</span> </a></li>
            <li style="margin-bottom: 20px">
                <a href="/show_result">
                    <i class="icon ti-layout"></i>
                    <span style="font-size: large">结果可视化</span>
                </a>
            </li>
            <li style="margin-bottom: 20px"><a href="/pro_info"><i class="icon ti-comment-alt"></i> <span style="font-size: large">产品说明</span> </a>
            </li>
        </ul>
    </div>
</div>
<!-- end::side menu -->

<!-- begin::navbar -->
<nav class="navbar">
    <div class="container-fluid">

        <div class="header-logo">
            <a href="#">
                <img src="static/assets/media/image/team_logo.png" alt="...">
                <span class="logo-text d-none d-lg-block" style="font-family: Aa阳关曲;font-size: x-large">Eyenergy</span>
            </a>
        </div>

        <div class="header-body">
            <ul class="navbar-nav">
                <li class="nav-item dropdown d-none d-lg-block">
                    <a href="#" class="nav-link" data-toggle="dropdown">
                        <i class="fa fa-th-large"></i>
                    </a>
                </li>
            </ul>

            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="d-lg-none d-sm-block nav-link search-panel-open">
                        <i class="fa fa-search"></i>
                    </a>
                </li>


            </ul>
        </div>

    </div>
</nav>
<!-- end::navbar -->

<!-- begin::main content -->
<main class="main-content">
    <div class="container-fluid">
        <!-- begin::page header -->
        <div class="page-header d-md-flex justify-content-between align-items-center">
            <h3>主页</h3>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb m-t-0">
                    <li class="breadcrumb-item" style="font-size: 15px;font-family: 微软雅黑">基本情况</li>
                    <li class="breadcrumb-item" style="font-size: 15px;font-family: 微软雅黑">网页介绍</li>
                    <li class="breadcrumb-item active" aria-current="page" style="font-size: 15px;font-family: 微软雅黑">基本模型介绍</li>
                </ol>
            </nav>
        </div>
        <!-- end::page header -->
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">基本情况</h4>
                <div class="accordion" id="accordionExample">

                     <div class="card">
                        <div class="card-header" id="headingOne">
                            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
                                    aria-expanded="true" aria-controls="collapseOne">
                                <h5>团队介绍</h5>
                            </button>
                        </div>
                        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                             data-parent="#accordionExample">
                            <div class="card-body" style="font-size: 15px">
                                <div class="row">
                                    <div class="col-md-3">
                                         <div class="card">
                                            <div class="card-body">
                                          <div class="accordion accordion-warning custom-accordion">
                                           <div class="accordion-row">
                                           <a href="#" class="accordion-header" style="background-color: #53D2DC">
                                    <span><h5><strong>队长</strong></h5></span>
                                    <i class="accordion-status-icon close fa fa-frown-o"></i>
                                    <i class="accordion-status-icon open fa fa-paw"></i>
                                </a>
                                <div class="accordion-body" style="font-size: 16px">
                                     <p>
                                    <i class="fa fa-magnet" aria-hidden="true"></i>
                                    <strong>姓名: </strong>刘妍
                                </p>
                                    <p>
                                    <i class="fa fa-trophy" aria-hidden="true"></i>
                                    <strong>团队分工: </strong>负责后端接口设计，实现前后端交互，页面美工，设计文档的编写、ppt和视频的制作
                                </p>
                                    <p>
                                    <i class="fa fa-cutlery" aria-hidden="true"></i>
                                    <strong>爱好: </strong>美食,电影
                                </p>
                                    <p>
                                    <i class="fa fa-trash" aria-hidden="true"></i>
                                    <strong>个性签名: </strong>no crazy no life!
                                </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                                    <div class="col-md-3">

                <div class="card">
                    <div class="card-body">

                        <div class="accordion accordion-danger custom-accordion">

                            <div class="accordion-row">
                                <a href="#" class="accordion-header" style="background-color:#3196E2">
                                    <span><h5 ><strong>队员一</strong></h5></span>
                                    <i class="accordion-status-icon close fa fa-thumbs-o-up"></i>
                                    <i class="accordion-status-icon open fa fa-thumbs-up"></i>
                                </a>
                                <div class="accordion-body" style="font-size: 16px">
                                    <p>
                                    <i class="fa fa-cube" aria-hidden="true"></i>
                                    <strong>姓名: </strong>李冰
                                </p>
                                    <p>
                                    <i class="fa fa-trophy" aria-hidden="true"></i>
                                    <strong>团队分工: </strong>负责可视化展现，前后端交互，前端排版优化，功能测试，bug查找，“扫雷专家”
                                </p>
                                    <p>
                                    <i class="fa fa-keyboard-o" aria-hidden="true"></i>
                                    <strong>爱好: </strong>打游戏
                                </p>
                                    <p>
                                    <i class="fa fa-graduation-cap" aria-hidden="true"></i>
                                    <strong>个性签名: </strong>follow your heart！
                                </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
                                    <div class="col-md-3">

                <div class="card">
                    <div class="card-body">
                        <div class="accordion accordion-success custom-accordion">

                            <div class="accordion-row">
                                <a href="#" class="accordion-header" style="background-color: #FF826C">
                                    <span><h5><strong>队员二</strong></h5></span>
                                    <i class="accordion-status-icon close fa fa-heart-o"></i>
                                    <i class="accordion-status-icon open fa fa-heart"></i>
                                </a>
                                <div class="accordion-body" style="font-size: 16px">
                                    <p>
                                    <i class="fa fa-star" aria-hidden="true"></i>
                                    <strong>姓名: </strong>熊清恒
                                </p>
                                    <p>
                                    <i class="fa fa-trophy" aria-hidden="true"></i>
                                    <strong>团队分工: </strong>负责web网页的前端页面设计与实现、相关图片的绘制、设计文档的编写、ppt和视频的主要制作
                                </p>
                                    <p>
                                    <i class="fa fa-smile-o" aria-hidden="true"></i>
                                    <strong>爱好: </strong>摸鱼摆烂
                                </p>
                                    <p>
                                    <i class="fa fa-heart" aria-hidden="true"></i>
                                    <strong>个性签名: </strong>怀着最好的期望，也做最坏的打算
                                </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
                                    <div class="col-md-3">

                <div class="card">
                    <div class="card-body">
                        <div class="accordion accordion-primary custom-accordion">

                            <div class="accordion-row">
                                <a href="#" class="accordion-header" style="background-color: #FFC05F">
                                    <span><h5><strong>队员三</strong></h5></span>
                                    <i class="accordion-status-icon close fa fa-plus"></i>
                                    <i class="accordion-status-icon open fa fa-close"></i>
                                </a>
                                <div class="accordion-body" style="font-size: 16px">
                                    <p>
                                    <i class="fa fa-rocket" aria-hidden="true"></i>
                                    <strong>姓名: </strong>崔昊阳
                                </p>
                                    <p>
                                    <i class="fa fa-trophy" aria-hidden="true"></i>
                                    <strong>团队分工: </strong>分类器设计，参数调试与故障诊断模型的训练，设计文档的编写，团队的“监工”
                                </p>
                                    <p>
                                    <i class="fa fa-bug" aria-hidden="true"></i>
                                    <strong>爱好: </strong>睡觉
                                </p>
                                    <p>
                                    <i class="fa fa-paper-plane" aria-hidden="true"></i>
                                    <strong>个性签名: </strong>生命会自己找到出路
                                </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
                                </div>



                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header" id="headingTwo">
                            <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
                                    data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                               <h5>背景介绍</h5>
                            </button>
                        </div>
                        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
                             data-parent="#accordionExample">
                            <div class="card-body" style="font-size: 15px">
                                大数据时代，分布式系统成为信息存储和处理的主流系统。相对于传统系统而言，分布式系统更为庞大和复杂，故障发生的平均
                                几率比较高，其运维的难度和复杂度大大提高。如何对分布式系统进行高效、准确的运维，成为保障信息系统高效、可靠运行的关键问题。
                                我们基于机器学习对分布式系统的故障数据进行分析，设计故障诊断模型，高效地分析并识别故障类别，实现了分布式系统故障运维的智能化，
                                以及快速恢复故障的同时大大降低分布式系统运维工作的难度，减少运维对人力资源的消耗。
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <h4 class="card-title">网页介绍</h4>
                <div class="accordion" id="accordionExample">
                     <div class="card">
                        <div class="card-header" id="headingThree">
                           <!-- <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
                                    data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"-->
                                <h5>使用说明<i style="font-size: x-small">  (点击网页名称可进行跳转) </i></h5>
{#                            <p style="font-size: small"> 点击网页名称可以进行跳转</p>#}
                           <!-- </button>-->
                        </div>
                        <!--<div id="collapseThree" class="collapse" aria-labelledby="headingThree"
                             data-parent="#accordionExample">-->
                            <div class="card-body" style="font-size: 15px">
                                <p>
                                    <i class="fa fa-hand-o-right" aria-hidden="true"></i>
                                    <a href="/upload_train" style="color:mediumseagreen;font-size: large;" onclick="clearCacheAndRedirect(event)"><strong>训练: </strong></a>训练页面支持用户<strong>上传训练集和验证集</strong>，<strong>自定义模型名称和模型参数</strong>进行训练并支持模型文件的<strong>下载</strong>
                                </p>
                                <p>
                                    <i class="fa fa-hand-o-right" aria-hidden="true"></i>
                                    <a href="/upload_test" style="color: mediumseagreen;font-size: large;" onclick="clearCacheAndRedirect(event)"><strong>测试: </strong></a>测试页面支持用户<strong>单条或批量上传</strong>测试集进行测试并支持<strong>下载</strong>测试结果,<strong>查找故障排名</strong>，<strong>查询</strong>对应样本的故障类型，<strong>删除模型文件</strong>
                                </p>
                                <p>
                                    <i class="fa fa-hand-o-right" aria-hidden="true"></i>
                                    <a href="/show_result" style="color: mediumseagreen;font-size: large;" onclick="clearCacheAndRedirect(event)"><strong>结果可视化: </strong></a>结果可视化页面支持以直方图，扇形图，水球图等形式对测试结果进行<strong>可视化展示</strong>
                                </p>
                                <p>
                                    <i class="fa fa-hand-o-right" aria-hidden="true"></i>
                                    <a href="/pro_info" style="color: mediumseagreen;font-size: large;" onclick="clearCacheAndRedirect(event)"><strong>产品说明: </strong></a>产品说明页面大致介绍了<strong>模型思路以及优缺点</strong>，网页的<strong>设计特点</strong>,以帮助用户更好地了解本产品
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <div class="card">
                <div class="card-body">

    <div class="page-header d-md-flex justify-content-between align-items-center">
            <h3>相关模型介绍</h3>
            <nav aria-label="breadcrumb">
            </nav>
        </div>

        <div class="row">
            <div class="col-md-6">

                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title"><strong>Transformer</strong></h4>
                        <div class="accordion custom-accordion">

                            <div class="accordion-row open">
                                <a href="#" class="accordion-header" style="background-color: #F886A8">
                                    <span><h5>模型原理</h5></span>
                                    <i class="accordion-status-icon close fa fa-caret-square-o-up"></i>
                                    <i class="accordion-status-icon open fa fa-caret-square-o-down"></i>

                                </a>
                                <div class="accordion-body" style="font-size: 16px">
                                    <p>
                                        Transformer Encoder通过自注意力机制对输入序列进行编码。</br></br>在自注意力机制中，每个输入都会和序列中的其他输入进行相似度计算，得到每个输入与其他输入的权重，然后将这些权重与对应的向量进行加权求和，得到该输入的表示。这样，每个输入都可以得到一个上下文相关的表示，从而更好地捕捉输入序列中的语义信息。
	</br></br>Transformer Encoder还采用了多头注意力机制，将自注意力机制拆分成多个子空间，每个子空间分别进行注意力计算，得到多个注意力输出，最后将这些输出进行拼接，得到最终的多头注意力表示。多头注意力机制能够提高模型的表达能力，同时也能够减少计算量。
                                    </p>
                                </div>
                            </div>

                            <div class="accordion-row">
                                <a href="#" class="accordion-header">
                                    <span><h5>模型结构</h5></span>
                                    <i class="accordion-status-icon close fa fa-caret-square-o-up"></i>
                                    <i class="accordion-status-icon open fa fa-caret-square-o-down"></i>
                                </a>
                                <div class="accordion-body" style="font-size: 16px">
                                     <p>
                                         <img src="static/image/Transformer结构图.png" style="height: 100%;width: 100%">

                                     </p>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

            </div>

            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title"><strong>Fully connected Net</strong></h4>
                        <div class="accordion custom-accordion">
                            <div class="accordion-row open">
                                <a href="#" class="accordion-header" style="background-color: #9AD8c5">
                                    <span><h5>模型原理</h5></span>
                                    <i class="accordion-status-icon close fa fa-search-plus"></i>
                                    <i class="accordion-status-icon open fa fa-search-minus"></i>
                                </a>
                                <div class="accordion-body" style="font-size: 16px">
                                    <p>
                                        全连接网络由多个神经元组成的多层结构，其中每个神经元都与前一层的所有神经元相连，形成了一个完全连接的网络结构。</br></br>每个神经元接收前一层神经元的输出，并将其加权求和后通过一个激活函数进行非线性变换，得到当前神经元的输出。这个输出作为下一层神经元的输入，继续进行加权求和和非线性变换，最终输出网络的预测结果。
	</br></br>全连接网络的训练过程通常采用反向传播算法进行优化，通过最小化损失函数来调整网络中每个神经元之间的权重和偏置，使得网络能够更好地拟合训练数据，并对新的输入数据进行准确的预测。
	</br></br>全连接网络在图像识别、自然语言处理、语音识别等领域都有广泛的应用，但其缺点是参数量较大，容易产生过拟合现象，需要采用正则化等方法进行优化。
                                    </p>
                                </div>
                            </div>
                            <div class="accordion-row">
                                <a href="#" class="accordion-header" style="background-color: white">
                                    <span><h5>模型结构</h5></span>
                                    <i class="accordion-status-icon close fa fa-search-plus"></i>
                                    <i class="accordion-status-icon open fa fa-search-minus"></i>
                                </a>
                                <div class="accordion-body" style="font-size: 16px">
                                     <p>
                                         <img src="static/image/全连接网络结构图.png" style="height: 100%;width: 100%">
                                     </p>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
                </div>
    </div>
    </div>

</main>
<!-- end::main content -->

<!-- begin::global scripts -->
<script src="static/assets/vendors/bundle.js"></script>
<!-- end::global scripts -->

<!-- begin::custom scripts -->
{#<script src="static/assets/js/custom.js"></script>#}

<script src="static/assets/js/app.js"></script>
<!-- end::custom scripts -->
<script src="https://cangshui.net/-down/otherweb/JSCSS/yinghua.js"></script>
<script>

  function clearCacheAndRedirect(event) {
    // 清空缓冲区代码
    localStorage.removeItem('fileResult');

    // 执行其他操作，例如页面重定向
    window.location.href = event.target.href;

    // 取消默认行为
    {#event.preventDefault();#}
  }
  function clearCacheAndRedirect(event) {
            // 清空缓冲区代码
            localStorage.removeItem('fileResult');
            localStorage.removeItem('lossData');
            // 执行其他操作，例如页面重定向
            window.location.href = event.target.href;

            // 取消默认行为
            {#event.preventDefault();#}
          }
</script>
</body>
</html>